<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <meta name="keywords" content="互联网信息安全技术手段公共服务平台" />
  <meta name="description" content="互联网信息安全技术手段公共服务平台" />
  <title>互联网信息安全技术手段公共服务平台</title>
  <link rel="stylesheet" href="static/css/bootstrap.min.css" />
  <script src="static/js/jquery-3.2.1.min.js"></script>
  <script src="static/js/lodash.js"></script>
  <script src="static/js/bootstrap.min.js"></script>
  <script src="static/plugins/layer-v1.9.0/layer/layer.js"></script>
  <style>
    .serve{
      margin:10px 20px;
    }
    .serve .table-bordered{
      border:1px solid #6BC4E5;
    }
    .serve .table-bordered>tbody>tr>td, .serve .table-bordered>tbody>tr>th, .serve .table-bordered>tfoot>tr>td, .serve .table-bordered>tfoot>tr>th,
    .serve .table-bordered>thead>tr>td, .serve .table-bordered>thead>tr>th{
      border:1px solid #6BC4E5;
    }
    .serve .table thead th {
      background-color: #6BC4E5;
      padding-top: 10px;
      height:40px;
      color:#fff;
      font-family: "Microsoft Yahei";
      font-size: 16px;
      font-weight: bold;
      text-align: center;
    }
    .serve .table tbody td{
      font-family: "Microsoft Yahei";
      font-size: 16px;
      line-height: 28px;
      overflow: auto;
      text-align: center;
      white-space: pre-wrap;
    }
    .serve .table tbody td:last-child{
      text-align: justify;
      text-indent: 2em;
    }
  </style>
</head>

<body>
  <div class="serve">
    <div class="table-responsive">
      <table class="table table-bordered">
        <thead>
          <tr>
            <th width="160">服务内容</th>
            <th width="160">服务对象</th>
            <th>说明</th>
          </tr>
        </thead>
        <tbody id="tread"></tbody>
      </table>
    </div>
  </div>
  <script type="text/template" id="treadTpl">
    <tr>
      <td><%= serveContent %></td>
      <td><%= serveObj %></td>
      <td><%= explain %></td>
    </tr>
  </script>
  <script>
    var tread = [{
      serveContent: '移动上网日志留存系统测试',
      serveObj: '省通信管理局、基础电信企业',
      explain: '使用专业测试工具，通过现网拨测、数据比对等方式，对基础电信企业的2/3/4G、WLAN等移动上网日志留存系统进行测试，包括：留存内容、查询方式、留存时间、时间误差、应用协议、查询时间、准确率等测试项，使其满足两部委考核的要求。',
    }, {
      serveContent: '信息安全管理系统考核测试',
      serveObj: '省通信管理局、基础电信企业',
      explain: '按照两部委考核要求，对基础电信企业IDC/ISP、CDN、互联网资源协作、域名等信息安全管理系统进行远程或现场基础数据核验和系统功能核验。',
    }, {
      serveContent: '信息安全管理系统扩容测试',
      serveObj: '基础电信企业',
      explain: '按照《互联网数据中心和互联网接入服务信息安全管理系统及接口测试方法》等标准规范要求，对基础电信企业IDC/ISP、CDN、互联网资源协作、域名等信息安全管理系统进行功能、性能测试，并出具测试报告，使其满足两部委考核中关于三同步的要求。',
    }, {
      serveContent: '数据分析服务',
      serveObj: '省通信管理局、接入企业',
      explain: '结合全国互联网基础资源和安全管理平台功能，分析利用系统数据提供对外服务，如为管局提供行业发展统计服务、为接入企业提供数据相关咨询服务等。',
    }]
    insertInfoTpl(tread, $('#tread'), $('#treadTpl'));
    /**
     * [insertInfoTpl 插入 html信息]
     * @param {[type]} data [渲染所需的数据]
     * @param {[type]} dom [加入页面中的哪个DOM节点]
     * @return {[type]} [description]
     */
    function insertInfoTpl(data, dom, tpl) {
      var infoTpl = tpl.html()
      var compiled = _.template(infoTpl)
      var html = ''
      _.forEach(data, function (item, index) {
        item.index = index + 1
        // console.log(item, index)
        html += compiled(item)
      })
      dom.append($(html))
    }
  </script>
</body>

</html>